<template>
<div class="box">
  <div>{{all_myrest_ShareList==null?'':''}}</div>
  <!--<div>all_myrest_ShareByUser::{{all_myrest_ShareByUser}}</div>-->
  <div class="tag">
      <div class="tagitem tag_all"><div class="itemcnt all active" v-on:click="allshareList($event)">全部晒单</div></div>
      <div class="tagitem tag_my"><div class="itemcnt my" v-on:click="myshareList($event)">我的晒单</div></div>
  </div>
  <div class="main noContShowImage">
      <a href="javascript:void(0)" v-for="item in allShareList">
          <div class="item">
              <div class="partR">
                  <div class="user">
                      <div class="username">{{item.userName}}</div>
                      <div class="udate">{{item.shareDate}}</div>
                  </div>
                  <div class="procnt">
                      <div class="title">{{item.shareTitle}}</div>
                      <div class="protit">{{item.productName}}</div>
                      <div class="qihao">期号：<span class="qihaoval">{{item.productPeriod}}</span></div>
                      <div class="cntxt">{{item.shareContent}}</div>
                      <div class="pics">
                          <div class="picitem" v-for="picList in item.shareimageList" v-bind:style="'background: url('+picList+') center center / cover;'"></div>
                          <!--<div class="picitem" style="background: url(&quot;http://tpzs.lep365.com/group1/M00/00/26/CgcHNVjc2FaARIcFAABMLpR9kYU97.jpeg&quot;) center center / cover;"></div>-->
                      </div>
                  </div>
              </div>
          </div>
      </a>
  </div>
</div>
</template>
<script>
  import stores from './mystore.js'
  import Vue from 'vue';
  import { XButton, XInput,Group, Tab, TabItem } from 'vux'
  import { mapGetters,mapActions } from 'vuex'
  import sha1 from 'js-sha1'

  export default {
      data(){
          return {
              allShareList:[],
              mypayload:{
              },
              buypayload:{
              },

              QueryUserPayload:{
                  url:'baseapi',
                  actionName:"QueryUserInfo",
                  postData: {
                      //mobile:"18616717008",
                      //password:"112233",
                      //treeView:"true"
                }
              },

              AllShareListPayload:{
                  url:'duodata',
                  actionName:"ShareList",
                  postData: {
                      //mobile:"18616717008",
                      //password:"112233",
                      //treeView:"true"
                  }
              },

              MyShareListPayload:{
                  url:'duodata',
                  actionName:"ShareByUser",
                  postData: {
                    //mobile:"18616717008",
                    //password:"112233",
                    //treeView:"true"
                  }
              },

          }
      },

      computed:{

          all_myrest_QueryUserInfo(){
              var dataval=this.$store.getters.all_restful_QueryUserInfo;
              if(dataval){
                  return dataval
              }else{
                  return null
              }
              //return dataval;
          },
          all_myrest_ShareList(){
              var dataval=this.$store.getters.all_restful_ShareList;
              if(dataval){
                  this.allShareList=dataval.body.sharelist
                  return dataval.body.sharelist;
              }else{
                  return null
              }
              //return dataval;
          },
          all_myrest_ShareByUser(){
              var dataval=this.$store.getters.all_restful_ShareByUser;
              if(dataval){
                  this.allShareList=dataval.body.sharelist
                  return dataval.body.sharelist;
              }else{
                  return null
              }
              //return dataval;
          },
          all_myrest(){
              return this.$store.getters.all_logindata
          },

      },
      created (){
          this.allShareFuc();
          //this.myShareFuc();
         // this.cntReady();
          //console.log('hahahahhahahahah'+this.cntReady())
      },

      methods:{
          doesh (){
            //this.$store.commit('restful_api',this.QueryUserPayload)
          },
          allShareFuc:function(){
              this.$store.commit('restful_api',this.AllShareListPayload);
          },
         /* myShareFuc:function(){
              this.$store.commit('restful_api',this.MyShareListPayload);
          },*/
          myshareList:function(e){
              var obj=e.currentTarget;
              if($(obj).hasClass("active")){

              }else{
                  this.$store.commit('restful_api',this.MyShareListPayload);
                  $(obj).addClass("active").parent().siblings().find(".itemcnt").removeClass("active")
                  this.all_myrest_ShareByUser
              }
          },
          allshareList:function(e){
              var obj=e.currentTarget;
              if($(obj).hasClass("active")){

              }else{
                  this.$store.commit('restful_api',this.AllShareListPayload);
                  $(obj).addClass("active").parent().siblings().find(".itemcnt").removeClass("active")
                  this.all_myrest_ShareList;
              }

          },
        /*  cntReady(){
              console.info(3434343);
              this.$store.commit('restful_api',this.mypayload);
           },
          ...mapActions([
              'increment',
              'decrement',
              'incrementIfOdd'
          ]),
        */
      },
      components: { XButton, Group, XInput, Tab, TabItem }

  }

</script>

<style scoped>
  *{ margin:0; padding:0;}
  body,html,main{ width:100%; height:100%; font-size:12px;}
  div img{ width:100%;}

  .main a{ text-decoration:none;}

  .item{ padding:0px 15px;}
  .partL{ width:56px;}
  .headpic{ width:55px; height:55px; border-radius:50px; overflow:hidden;}

  .partR{ padding:10px 0;}
  .user{ display:box; display:-webkit-box;}
  .username{ width:60%; color:#d01e41;}
  .udate{ -webkit-box-flex:1;box-flex:1; text-align:right; color:#878787; font-size: 12px;}
  .procnt{ background-color:#efefef; border-radius:4px; margin-top:6px; padding:10px 10px 0 10px; position:relative;}
  .title{ font-size:14px; color:#151515;}
  .protit{ color:#878787; font-size: 12px;}
  .qihao{ color:#878787; font-size: 12px;}
  .cntxt{ color:#535353; font-size: 12px; padding-top:5px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
  .pics{ display:box; display:-webkit-box; padding:5px 0 10px 10px;}
  .picitem{ width:60px; height:60px; margin-right:10px;}
  /*.p1{ background:url(../images/shai/shaipic01.png) no-repeat; background-position:center; background-size:cover;}
  .p2{ background:url(../images/shai/shaipic02.png) no-repeat; background-position:center; background-size:cover;}
  .p3{ background:url(../images/shai/shaipic03.png) no-repeat; background-position:center; background-size:cover;}*/
  .sanjiao{ width:15px; height:15px; position:absolute; top:-1px; left:-11px;}

  .tag{ display:box; display:-webkit-box; margin-bottom:10px;}
  .tagitem{ box-flex:1; -webkit-box-flex:1; text-align:center; border-bottom:1px solid #eee; font-size:14px;}
  .itemcnt{ width:70px; margin:0 auto; padding:10px 10px;}
  .itemcnt.active{ border-bottom:3px solid #db3652; color:#db3652}

</style>
